<!-- 使用例子：
<u-sticky>
	<jp-tabs :tabList="tabsList" @onTabClick="tabClick" :current="active" :scrollable="true"></jp-tabs>
</u-sticky>

	tabsList: [{
			name: '已签约',
		},
		{
			name: '已过期',
		}],
	active: 0,
	
	tabClick(item) {
		this.active = item.index
		...do something ...
	}, -->

<template>
	<view class="tabs" :class="{'border-none':showBottomBorder == false}" :style="style">
		<u-tabs :list="tabList" :keyName="keyName" lineWidth="64rpx" lineHeight="6rpx" :lineColor="activeColor" :activeStyle="{
		            color: activeColor,
		            fontWeight: 'bold',
					fontSize: '32rpx',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: inactiveColor,
					fontSize: '32rpx',
		            transform: 'scale(1)'
		        }" :itemStyle="'height: 88rpx;'+itemPadding" :duration="50" :current="active" @change="change"
			@click="tabClick" :scrollable="scrollable">
			<template #left>
				<slot name="left"></slot>
			</template>
			<template #right>
				<slot name="right"></slot>
			</template>
		</u-tabs>
	</view>
</template>

<script>
	export default {
		name: "jp-tabs",
		data() {
			return {
				active: 0,
				style:''
			};
		},
		props: {
			tabList: {
				type: Array,
				default: () => [],
				require: true
			},
			keyName: {
				type: String,
				default: 'name',
				require: false
			},
			scrollable: {
				type: Boolean,
				default: false,
				require: false
			},
			itemPadding: {
				type: String,
				default: 'padding:0 32rpx;',
				require: false
			},
			current: {
				type: Number,
				default: 0,
				require: false
			},
			showBottomBorder: {
				type: Boolean,
				default: true,
				require: false
			},
			backgroundColor: {
				type: String,
				default: '#FFF'
			},
			activeColor: {
				type: String,
				default: 'var(--uni-color-primary)'
			},
			inactiveColor: {
				type: String,
				default: '#4E5969'
			}
		},
		created() {
			this.active = this.current
			this.style = `background-color: ${this.backgroundColor};`
		},
		watch: {
			current(val) {
				this.active = this.current
			},
		},
		methods: {
			tabClick(item) {
				this.active = item.index
				this.$emit("onTabClick", item)
				console.log('【jp-tabs】tabClick=>' + JSON.stringify(item))
			},
			change(e) {
				this.active = e.index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		border-bottom: 0.5rpx solid #E5E6EB;
		// position: sticky;
		// top: 0;
		z-index: 999;

		&.border-none {
			border-bottom: none;
		}
	}
</style>